import GpContainer from "@/components/GpContainer";
import { Image, Navigator, Text, View } from "@tarojs/components";
import { useMemo, useRef } from "react";
import clsx from "clsx";
import styles from './index.module.css';
import GpFontIcon from "@/components/GpFontIcon";
import { GpDot } from "@/components/GpDot";
import { GpTouchableView } from "@/components/GpTouchableView";
import GpProtected from "@/components/GpProtected";
import { useAuthStore } from "@/store";
import { navigate } from "@/utils/navigation";
import { pageMapper } from "@/constants/pageMap";

export default function Index() {
  const logout = useAuthStore(state => state.logout)
  const userInfo = useAuthStore(state => state.userInfo)
  const authenticated = useMemo(() => {
    return userInfo?.memberId
  }, [userInfo])
  const topNavs = useRef([
    {
      icon: "/static/images/me/wodejianli.png",
      text: "我的简历",
      url: "/" + pageMapper.me.resume.import
    },
    {
      icon: "/static/images/me/wodeyingpin.png",
      text: "我的应聘",
      url: "/" + pageMapper.me.interviews
    },
    {
      icon: "/static/images/me/mianshirl.png",
      text: "面试日历",
      url: ""
    },
    {
      icon: "/static/images/me/aireply.png",
      text: "AI回复",
      url: ""
    }
  ])
  function renderTopInfo() {
    return (
      <View className="relative w-[750px] h-[456px]">
        <Image src="/static/images/me/top-bg.png" mode="widthFix" className="absolute w-full object-cover" />
        <View className="absolute top-0 left-0 right-0 bottom-0 pt-[208px]">
          <GpProtected>
            <View className="flex flex-row items-center px-[32px]" onClick={() => navigate(pageMapper.me.info)}>
              <Image src={userInfo?.avatar || __DEF_AVATAR__} mode="aspectFill" className="rounded-[50%] size-[120px] object-cover mr-[20px]" />
              <View className="flex-1 flex flex-col">
                <Text className="text-white text-[40px] font-bold">{userInfo?.nickName}</Text>
                <Text className="text-white/70 text-[28px] mt-[16px]">{userInfo?.mobile || "登录授权查看求职信息"}</Text>
              </View>
              <GpFontIcon name="icon-a-jiantou_youxiao" size={48} color="#ffffff" />
            </View>
          </GpProtected>
        </View>
      </View>
    )
  }
  function renderTopNav() {
    return (
      <View className={clsx("bg-white rounded-[24px] flex flex-row items-center justify-between", styles.topNavBlock)}>
        {
          topNavs.current.map(item => (
            <GpProtected key={item.url}>
              <Navigator url={item.url} className="flex flex-col justify-center items-center" key={item.url}>
                <Image src={item.icon} className="object-cover size-[72px]"/>
                <Text className="text-primary text-[24px]">{item.text}</Text>
              </Navigator>
            </GpProtected>
          ))
        }
      </View>
    )
  }
  function renderInterview() {
    return (
      <View className={clsx(styles.interview, "rounded-[24px] px-[28px] box-border mt-[24px]")}>
        <View className={clsx(styles.interviewHeader, "flex flex-row items-center box-border text-theme")}>
          <GpFontIcon name="icon-wodemianshi" size={28} className="text-theme mr-[10px]" />
          <Text className="font-medium text-[28px]">我的面试</Text>
        </View>
        <View className="pt-[38px] pb-[64px] box-border">
          <View className="flex flex-row justify-between items-center box-border">
            <Text className="font-bold text-primary text-[36px]">产品运营专员</Text>
            <GpFontIcon name="icon-a-jiantou_youxiao" size={32} color="#ACAEB2" />
          </View>
          <View className="flex flex-row items-center flex-nowrap mt-[28px]">
            <Text className="text-secondary text-[28px]">面试时间</Text>
            <View className="flex-1 w-0 truncate ml-[24px]">
              <Text className="text-primary font-bold text-[32px]">06-27  10:00</Text>
              <Text className="text-secondary text-[28px]">（周五上午）</Text>
            </View>
          </View>
          <View className="flex flex-row items-center flex-nowrap mt-[24px]">
            <Text className="text-secondary text-[28px]">面试地点</Text>
            <View className="flex-1 w-0 truncate ml-[24px]">
              <Text className="text-primary text-[28px]">广东广州天河区天河软件园华翠街68号</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
  function renderTestMatch() {
    return (
      <View className="rounded-[24px] bg-white py-[20px] pl-[16px] pr-[32px] flex flex-row items-center mt-[24px]">
        <Image src="/static/images/me/test-match.png" className="size-[130px] object-cover block mr-[20px]" />
        <View className="flex-1 flex flex-col justify-center">
          <Text className="text-primary text-[32px] font-bold">AI匹配分析</Text>
          <Text className="text-[28px] leading-[28px] text-secondary mt-[16px]">免费测试岗位匹配度&gt;&gt;</Text>
        </View>
        <GpTouchableView className="rounded-[12px] bg-theme h-[56px] flex items-center px-[24px]">
          <Text className="text-white text-[26px]">立即测评</Text>
        </GpTouchableView>
      </View>
    )
  }
  function renderActions() {
    return (
      <View className="rounded-[24px] bg-white mt-[24px]">
        <View className="box-border flex flex-row items-center h-[80px] px-[28px]">
          <Text className="text-third text-[28px]">更多应用</Text>
        </View>
        <GpTouchableView className="h-[96px] flex flex-row justify-between items-center box-border px-[28px]">
          <GpFontIcon name="icon-zhenduan" size={32} className="text-primary mr-[16px]" />
          <Text className="text-primary text-[28px] flex-1">简历诊断</Text>
          <GpFontIcon name="icon-a-jiantou_youxiao" size={32} color="#ACAEB2" />
        </GpTouchableView>
        <GpTouchableView className="h-[96px] flex flex-row justify-between items-center box-border px-[28px]">
          <GpFontIcon name="icon-xiaoxi" size={32} className="text-primary mr-[16px]" />
          <Text className="text-primary text-[28px] flex-1">消息通知</Text>
          <View className="flex flex-row items-center mr-[16px]">
            <GpDot size={12} color="#F53F3F" className="mr-[8px]"/>
            <Text className="text-third text-[24px]">未开启</Text>
          </View>
          <GpFontIcon name="icon-a-jiantou_youxiao" size={32} color="#ACAEB2" />
        </GpTouchableView>
        <GpTouchableView className="h-[96px] flex flex-row justify-between items-center box-border px-[28px]">
          <GpFontIcon name="icon-guanyuwomen" size={32} className="text-primary mr-[16px]" />
          <Text className="text-primary text-[28px] flex-1">关于我们</Text>
          <GpFontIcon name="icon-a-jiantou_youxiao" size={32} color="#ACAEB2" />
        </GpTouchableView>
      </View>
    )
  }
  function renderLogout() {
    if (!authenticated) return null
    return (
      <GpTouchableView className="bg-white rounded-[24px] h-[80px] box-border flex flex-row items-center justify-center mt-[40px]" onClick={logout}>
        <Text className="text-[28px] text-[#ACAEB2]">退出登录</Text>
      </GpTouchableView>
    )
  }
  return <GpContainer className="bg-[#F4F6FC] min-h-screen">
    {renderTopInfo()}
    <View className="px-[32px] box-border -mt-[86px] relative z-10">
      {renderTopNav()}
      {authenticated ? renderInterview() : renderTestMatch()}
      {renderActions()}
      {renderLogout()}
    </View>
  </GpContainer>
}
